<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .log {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        input[type="text"] {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .status.connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <h1>WebSocket测试页面</h1>
    
    <div class="container">
        <h2>连接控制</h2>
        <div id="status" class="status disconnected">未连接</div>
        <button id="connectBtn" onclick="connect()">连接</button>
        <button id="disconnectBtn" onclick="disconnect()" disabled>断开</button>
    </div>
    
    <div class="container">
        <h2>消息发送</h2>
        <div>
            <label>消息ID:</label>
            <input type="text" id="messageId" value="1" placeholder="消息ID">
        </div>
        <div>
            <label>协议号:</label>
            <input type="text" id="protocolCode" value="1001" placeholder="协议号">
        </div>
        <div>
            <label>消息内容:</label>
            <input type="text" id="messageBody" value="Hello from WebSocket" placeholder="消息内容">
        </div>
        <button onclick="sendMessage()" id="sendBtn" disabled>发送消息</button>
    </div>
    
    <div class="container">
        <h2>日志</h2>
        <div id="log" class="log"></div>
        <button onclick="clearLog()">清空日志</button>
    </div>

    <script>
        let ws = null;
        let isConnected = false;

        function log(message) {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${timestamp}] ${message}\n`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function updateStatus() {
            const statusDiv = document.getElementById('status');
            const connectBtn = document.getElementById('connectBtn');
            const disconnectBtn = document.getElementById('disconnectBtn');
            const sendBtn = document.getElementById('sendBtn');

            if (isConnected) {
                statusDiv.textContent = '已连接';
                statusDiv.className = 'status connected';
                connectBtn.disabled = true;
                disconnectBtn.disabled = false;
                sendBtn.disabled = false;
            } else {
                statusDiv.textContent = '未连接';
                statusDiv.className = 'status disconnected';
                connectBtn.disabled = false;
                disconnectBtn.disabled = true;
                sendBtn.disabled = true;
            }
        }

        function connect() {
            try {
                ws = new WebSocket('ws://localhost:26000/ws');
                
                ws.onopen = function(event) {
                    isConnected = true;
                    updateStatus();
                    log('WebSocket连接已建立');
                };
                
                ws.onmessage = function(event) {
                    if (event.data instanceof Blob) {
                        // 处理二进制数据
                        const reader = new FileReader();
                        reader.onload = function() {
                            try {
                                // 这里需要解析protobuf数据
                                // 由于浏览器端没有protobuf库，我们直接显示原始数据
                                const arrayBuffer = reader.result;
                                const uint8Array = new Uint8Array(arrayBuffer);
                                log(`收到二进制响应: ${uint8Array.length} 字节`);
                                log(`数据: ${Array.from(uint8Array).map(b => b.toString(16).padStart(2, '0')).join(' ')}`);
                            } catch (error) {
                                log(`解析响应失败: ${error.message}`);
                            }
                        };
                        reader.readAsArrayBuffer(event.data);
                    } else {
                        log(`收到文本消息: ${event.data}`);
                    }
                };
                
                ws.onclose = function(event) {
                    isConnected = false;
                    updateStatus();
                    log(`WebSocket连接已关闭: ${event.code} - ${event.reason}`);
                };
                
                ws.onerror = function(error) {
                    log(`WebSocket错误: ${error.message}`);
                };
                
            } catch (error) {
                log(`连接失败: ${error.message}`);
            }
        }

        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }

        function sendMessage() {
            if (!isConnected || !ws) {
                log('WebSocket未连接');
                return;
            }

            try {
                const messageId = parseInt(document.getElementById('messageId').value);
                const protocolCode = parseInt(document.getElementById('protocolCode').value);
                const messageBody = document.getElementById('messageBody').value;

                // 创建简单的消息结构（模拟protobuf）
                // 实际项目中应该使用protobuf.js库
                const message = {
                    id: messageId,
                    code: protocolCode,
                    body: messageBody
                };

                // 将消息转换为JSON字符串（临时方案）
                const jsonMessage = JSON.stringify(message);
                ws.send(jsonMessage);
                
                log(`发送消息: ${jsonMessage}`);
                
            } catch (error) {
                log(`发送消息失败: ${error.message}`);
            }
        }

        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }

        // 页面加载时初始化
        updateStatus();
        log('WebSocket测试页面已加载');
    </script>
</body>
</html> 